<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard title="使用问题" isright="isright">
            <template slot="right">
              <div class="search">
                <el-input
                  placeholder="请输入您要搜索的问题"
                  v-model="inputValue">
                  <el-button icon="el-icon-search" slot="suffix" circle></el-button>
                </el-input>
              </div>
            </template>
            <div class="issuesList">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item :title="iss.title" :name="index" v-for="(iss,index) in issuesList" :key="iss.id">
                  <div>
                    <span v-html="iss.content"></span>
                    <a @click="handlerIssues(iss)">阅读原文</a>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <Details :selectIss="selectIss"></Details>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import Details from "./details.vue"
import NewCard from "@/wss/components/newCard.vue";
export default {
    name:'AccountProblem',
    components:{NewCard,Details},
    data(){
      return{
        isright:true,//显示搜索框
        inputValue:'',//搜索框输入的值
        activeName:0,//默认展示的面板
        issuesList:[
          {
            id:'1',
            title:'号码停用/遗失/注销，无法接收验证码/更换手机号码怎么办？',
            content:`
              <p>1、手机号码不用及时注销</p>
              <p>有些朋友在更换手机号码时直接把老的手机卡弃之不管，认为只要不用了就会自动关闭注销。事实上，虽然会自动注销，但是会耗费几个月的时间，在这段时间内，系统会自动扣除每个月的月租费，直到注销为止。手机与用户的信用度相连，为了以后的业务或者银行业务，请及时注销。</p>
              <p>2、更改银行卡绑定</p>
              <p>手机号码发生更改后，需尽快修改与之绑定的各种银行卡、信用卡密码。也可以登录网银修改网银账号资料，更换手机号码。已经停机销号的只能带银行卡和身份证到银行营业厅办理。</p>
              <p>3、更改QQ号、微信绑定</p>
              <p>许多人通过手机号直接登录QQ和微信。建议更改手机号码前，在网上完成重新绑定。</p>
            `,
          },
          {
            id:'2',
            title:'如何更改手机号？',
            content:`
              <p>1、如何更改手机号？</p>
              <p>有些朋友在更换手机号码时直接把老的手机卡弃之不管，认为只要不用了就会自动关闭注销。事实上，虽然会自动注销，但是会耗费几个月的时间，在这段时间内，系统会自动扣除每个月的月租费，直到注销为止。手机与用户的信用度相连，为了以后的业务或者银行业务，请及时注销。</p>
              <p>2、更改银行卡绑定</p>
              <p>手机号码发生更改后，需尽快修改与之绑定的各种银行卡、信用卡密码。也可以登录网银修改网银账号资料，更换手机号码。已经停机销号的只能带银行卡和身份证到银行营业厅办理。</p>
              <p>3、更改QQ号、微信绑定</p>
              <p>许多人通过手机号直接登录QQ和微信。建议更改手机号码前，在网上完成重新绑定。</p>
            `,
          },
          {
            id:'3',
            title:'如何解绑手机？',
            content:`
              <p>1、如何解绑手机？</p>
              <p>有些朋友在更换手机号码时直接把老的手机卡弃之不管，认为只要不用了就会自动关闭注销。事实上，虽然会自动注销，但是会耗费几个月的时间，在这段时间内，系统会自动扣除每个月的月租费，直到注销为止。手机与用户的信用度相连，为了以后的业务或者银行业务，请及时注销。</p>
              <p>2、更改银行卡绑定</p>
              <p>手机号码发生更改后，需尽快修改与之绑定的各种银行卡、信用卡密码。也可以登录网银修改网银账号资料，更换手机号码。已经停机销号的只能带银行卡和身份证到银行营业厅办理。</p>
              <p>3、更改QQ号、微信绑定</p>
              <p>许多人通过手机号直接登录QQ和微信。建议更改手机号码前，在网上完成重新绑定。</p>
            `,
          },
        ],
        selectIss:{},
      }
    },
    mounted(){
      this.selectIss=this.issuesList[0];//默认选中第一条问题
    },
    methods:{
      //单击阅读原文
      handlerIssues(iss){
        this.selectIss=iss
      }
    },
}
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content ,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col>div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body{
  height: 100%;
}
::v-deep .el-card__body{
  position: relative;
  padding: 0 0 30px 0;
}
::v-deep .el-card__body .top{
  margin-left: 30px;
  margin-right: 30px;
}
::v-deep .el-card__body>div{
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body>div::-webkit-scrollbar{
  width: 0px;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 搜索 */
::v-deep .search .el-input__inner{
  border-radius: 18px;
}
.search .el-button{
  border: 0;
  margin-top: 4px;
  padding: 6px;
  font-size: 16px;
}

/* 问题列表 */
.issuesList .el-collapse{
  border: 0;
}
.issuesList .el-collapse-item{
  padding: 0 30px;
}
.issuesList >>> .el-collapse-item__wrap,
.issuesList >>> .el-collapse-item__header{
  background-color: transparent!important;
}
.issuesList >>> .el-collapse-item__header{
  font-weight: bold;
  font-size: 16px;
  height: auto;
  padding: 11px 0;
}
.issuesList >>> .el-collapse-item__content>div>span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.issuesList >>> .el-collapse-item__content>div>span p{
  margin: 0;
  display: inline;
}
.issuesList >>> .el-collapse-item__content>div>a{
  color: #39486f;
}

.issuesList >>> .el-collapse-item__header.is-active{
  padding-bottom: 0;
  line-height: 36px;
}
.issuesList .el-collapse-item:hover,
.issuesList .el-collapse-item.is-active,
.issuesList >>> .el-collapse-item__header.is-active{
  background-color: #F4F5F8;
}

</style>
